/**
 * Created by luckyjing on 16/3/24.
 */
import React from 'react';
import {render} from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
import $ from 'jquery';
import ArticleForm from './form';
import PaperArea from './paper';
import AppBar from './appBar';
import TableArea from './table';
import Divider from 'material-ui/lib/divider';
import Dialog from './dialog';
var App = React.createClass({
    getInitialState: function () {
        return {
            data: [],
            title: '',
            content: '',
            confirm:false,
            current: {
                title: '',
                content: '',
                confirm:false,
            },
            open:false
        }
    },
    getContent: function () {
        $.get(this.props.source, function (res) {
            if (this.isMounted()) {
                this.setState({
                    data: res
                });
            }
        }.bind(this));
    },
    handleTitle: function (event) {
        this.setState({
            title: event.target.value
        })
    },
    handleContent: function (event) {
        this.setState({
            content: event.target.value
        })
    },
    handleConfirm:function (event) {
        this.setState({
            confirm: event.target.value
        })
    },
    keySubmit: function (event) {
        console.log('触发');
        if (event.keyCode == 13) {
            this.submit(event);
        }
    },
    submit: function (event) {
        event.preventDefault();
        if (!this.state.title || !this.state.content) {
            return console.log('请完善');
        }
        $.post('api/articles', this.state, function () {
            this.setState({
                title: '',
                content: ''
            });
            this.getContent();
        }.bind(this));
    },
    handleClose:function () {
        this.setState({
            open:!this.state.open
        })
    },
    handleRowClick: function (rowNumber) {
        console.log('123')
        this.handleClose();
      console.log(rowNumber);
    },
    componentDidMount: function () {
        this.getContent();
    },
    render: function () {
        var main = (
            <div>
                {AppBar()}
                <div onKeyUp={this.keySubmit}>
                    <TableArea data={this.state.data} rowClick={this.handleRowClick}/>
                    <Divider/>
                    <Dialog title={this.state.current.title} open={this.state.open} content={this.state.current.content} handleClose={this.handleClose}/>
                    <ArticleForm title={this.state.title}
                                 content={this.state.content}
                                 handleTitle={this.handleTitle}
                                 handleContent={this.handleContent}
                                 submit={this.submit}
                    />
                </div>
            </div>
        );
        return (
            PaperArea(main)
        )
    }
});
render(
    <App source="api/articles"/>
    , document.getElementById('app')
);